<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";

export default {
  mixins: [resize],
  props: {
    className: { type: String, default: "chart" },
    width: { type: String, default: "100%" },
    height: { type: String, default: "350px" },
    autoResize: { type: Boolean, default: true },
    chartData: { type: Object, required: true },
    showType: { type: Boolean, default: false },
    title: { type: String, default: "" },
  },
  data() {
    return {
      chart: null,
      showChartData: {},
      curStart: 0,
      curEnd: 100,
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler() {
        this.setOptions();
      },
    },
    showType: {
      deep: true,
      handler() {
        this.updateOptions();
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      console.log("initChart");
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
      this.chart.on("click", (param) => {
        this.$emit("dayChartClick", param);
      });
      this.chart.on("datazoom", (param) => {
        if (!this.showType) {
          const length = this.showChartData.length;
          if (length !== undefined && length > 0) {
            this.curStart = param.start;
            this.curEnd = param.end;
            this.updateOptions();
          }
        }
      });
    },
    setOptions() {
      console.log("setOptions");
      this.showChartData = JSON.parse(JSON.stringify(this.chartData));
      if (this.showChartData.x_axis == undefined) return;
      const y_keys = this.showChartData.ys_axis.map((v) => v.name);
      var a = 1
      const chart_series = this.showChartData.ys_axis.map((v) => {
        return {
          name: v.name,
          smooth: true,
          type: "line",
          yAxisIndex: ((a++)%2),// 对应的坐标  0 左侧y轴 1 右侧y轴
          data: v.data,
        };
      });
      console.log("chart_series")
       console.log(chart_series)
      this.chart.setOption({
        title: { left: "left", text: this.title },
        grid: { left: "2%", right: "2%", bottom: "3%", containLabel: true },
        tooltip: {
          trigger: "axis",
          axisPointer: { type: "cross" },
          padding: [5, 10],
        },
        xAxis: { data: this.showChartData.x_axis.data },
        yAxis: [{ axisTick: { show: false }}, { type: 'value', axisLabel: { formatter: '{value}' }}],
        legend: { left: "right", data: y_keys },
        series: chart_series,
        dataZoom: [
          { show: true, realtime: true, start: 0, end: 50 },
          { type: "inside", realtime: true, start: 0, end: 50 },
        ],
      });
      this.chart.dispatchAction({ type: "dataZoom", start: 0, end: 100 });
    },

    updateOptions() {
      const len = this.showChartData.length;
      const i = Math.floor((this.curStart / 100) * len);
      const j = Math.ceil((this.curEnd / 100) * len);
      this.showChartData = JSON.parse(JSON.stringify(this.chartData));
      console.log("updateOptions");
      var chart_series = {};
      if (this.showType) {
        chart_series = this.showChartData.ys_axis.map((v) => {
          return {
            name: v.name,
            smooth: true,
            type: "line",
            data: v.data.slice(i, j),
          };
        });
      } else {
        const accumulator = (arr) =>
          arr.map(
            (
              (sum) => (value) =>
                (sum += value)
            )(0)
          );
        chart_series = this.showChartData.ys_axis.map((v) => {
          return {
            name: v.name,
            smooth: true,
            type: "line",
            data: accumulator(v.data.slice(i, j)),
          };
        });
      }
      this.chart.setOption({
        xAxis: { data: this.showChartData.x_axis.data.slice(i, j) },
        series: chart_series,
        dataZoom: [
          {
            show: true,
            realtime: true,
            start: this.curStart,
            end: this.curEnd,
          },
          {
            type: "inside",
            realtime: true,
            start: this.curStart,
            end: this.curEnd,
          },
        ],
      });
    },
  },
};
</script>
